<template>
  <div>
    <div class="line"></div>
    <div style="display: flex; height: 60px; line-height: 60px; border-bottom: 1px solid #E6E6E6; background-color: white">
      <!--logo-->
      <div style="width: 300px; text-align: center; ">
        <el-link style="font-family: 华文行楷; font-size: 30px; color: #409EFF" :underline="false" @click="$router.push('/front/home')">网上诊疗平台</el-link>
      </div>
      <!--导航菜单-->
      <div style="flex: 1">
        <el-menu class="el-menu-demo"
                 mode="horizontal"
                 default-active="1"
                 @select="handleSelect">
          <el-menu-item index="1" @click="goPage('home')">首页</el-menu-item>
          <el-submenu index="2" v-if="user.token">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1" @click="goPage('order')">我的订单</el-menu-item>
            <el-menu-item index="2-2" @click="goPage('comment')">我的评论</el-menu-item>
            <el-menu-item index="2-3" @click="goPage('personQue')">我的提问</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" @click="goPage('fastOrder')">预约挂号</el-menu-item>
          <el-menu-item index="4" @click="goPage('im')" v-if="user.token">快速问诊</el-menu-item>
          <el-menu-item index="5" @click="goPage('adminLogin')">管理员后台</el-menu-item>
          <el-menu-item index="6" @click="goPage('phyLogin')">我是医生</el-menu-item>
        </el-menu>
        <div class="line"></div>
      </div>
      <div style="width: 250px">
        <div v-if="!user.username" style="text-align: right; padding-right: 30px">
          <el-button @click="$router.push('/login')">登录</el-button>
          <el-button @click="$router.push('/register')">注册</el-button>
        </div>
        <div v-else>
          <el-dropdown style="width: 60%; cursor: pointer">
            <div style="display: inline-block">
              <img :src="user.photo" alt=""
                   style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">
              <span style="font-family: 华文行楷; font-size: 20px">{{ user.nickname }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center">
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <router-link to="/front/userPerson" style="text-decoration: none">个人中心</router-link>
              </el-dropdown-item>
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <router-link to="/front/userPassword" style="text-decoration: none">修改密码</router-link>
              </el-dropdown-item>
              <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                <span style="text-decoration: none" @click="logout">退出</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

      <div style="width: 1200px; margin: 0 auto; ">
        <router-view @refreshUser="getUser"/>
      </div>

    <el-footer style="height: 50px; padding-top: 10px; margin-top: 5px; text-align: center; border-top: solid 1px #F5F5DC;">
      <span style="font-size:16px; color: #0d6efd">Copyright &copy; 2023.网上诊疗平台 All 刘姝言</span>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: "Front",
  data() {
    return {
      activeIndex: '1',
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    };
  },
  methods: {
    goPage(link) {
      if (link === "home") {
        this.$router.push("/front/home").catch(error => error);
      } else if ((link === "order")) {
        this.$router.push("/front/order").catch(error => error);
      } else if ((link === "comment")) {
        this.$router.push("/front/comment").catch(error => error);
      }else if ((link === "personQue")) {
        this.$router.push("/front/personQue").catch(error => error);
      }else if ((link === "fastOrder")) {
        this.$router.push("/front/fastOrder").catch(error => error);
      }else if ((link === "im")) {
        this.$router.push("/front/im").catch(error => error);
      }else if ((link === "adminLogin")) {
        this.$router.push("/adminLogin").catch(error => error);
      }else if ((link === "phyLogin")) {
        this.$router.push("/phyLogin").catch(error => error);
      }
      else {

      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getUser(){
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      if (username) {
        this.request.post("/user/findUserByName?username=" + username).then(res => {
          if (res) {
            res.token = this.user.token
            localStorage.setItem("user",JSON.stringify(res))
            this.user = res
            console.log(res.password)
          }
        })
      }
    },
    logout(){
      localStorage.removeItem("user")
      this.$message.success("退出成功")
      this.$router.push("/login")
    }
  }
}
</script>

<style scoped>
.item{
  display: inline-block;
  width: 100px;
}
.el-main {
  background-color: #F5F7F9;
}

/*el-container {
  min-height: 100%; !* 2. 需要将容器的高度设置成100% *!
  position: relative; !* 3. 容器的position设置为relative，给子元素定位提供基点 *!
}*/

/*el-footer{
  position: absolute;
  bottom: 0; !* 4. 设置页脚position为absolute之后，再将其bottom值设为0，即可使其处于页面的底部 *!
  width: 100%;
}*/

</style>
